<template>
  <view class="home-container">
    <!-- 头部欢迎区域 -->
    <view class="welcome-section">
      <view class="header-info">
        <image class="user-avatar" src="https://picsum.photos/100/100" mode="aspectFill"></image>
        <view class="welcome-text">
          <text class="welcome-title">Welcome Back</text>
          <text class="user-name">自习小能手</text>
        </view>
      </view>

      <view class="study-data">
        <view class="data-item">
          <text class="data-value">250h</text>
          <text class="data-label">累计自习时长</text>
        </view>
        <view class="data-item">
          <text class="data-value">98%</text>
          <text class="data-label">专注度</text>
        </view>
      </view>
    </view>

    <!-- 功能按钮区域 -->
    <view class="function-buttons">
      <view class="button-item" @click="enterTodoList">
        <image src="/static/icons-home/代办事项.png" mode="aspectFit"></image>
        <text>待办List</text>
      </view>
      <view class="button-item" @click="enterHabit">
        <image src="/static/icons-home/好评.png" mode="aspectFit"></image>
        <text>我的习惯</text>
      </view>
      <view class="button-item" @click="enterFocus">
        <image src="/static/icons-home/灵感.png" mode="aspectFit"></image>
        <text>个人专注</text>
      </view>
      <view class="button-item" @click="enterTarget">
        <image src="/static/icons-home/目标.png" mode="aspectFit"></image>
        <text>我的目标</text>
      </view>
    </view>

    <!-- 近期活动区域 -->
    <view class="recent-activity">
      <view class="activity-header">
        <text class="activity-title">Recent Activity</text>
        <view class="see-all" @click="viewAllRecords">See all</view>
      </view>
      <view class="activity-list">
        <view class="activity-item" v-for="(item, index) in activityList" :key="index">
          <view class="item-icon">
            <image :src="item.icon" ></image>
          </view>
          <view class="item-content">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-time">{{ item.time }}</text>
          </view>
          <view class="item-value">{{ item.value }}</view>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activityList: [
        { title: '今日数据', time: '09:00 - 11:00', value: '2h' , icon: '/static/icons-home/数据分析.png'},
        { title: '今日放松', time: 'Yesterday', value: '1.5h', icon: '/static/icons-home/娱乐.png'},
        { title: '学习报告', time: 'Last Week', value: '3h' , icon: '/static/icons-home/报告.png'}
      ]
    };
  },
  methods: {
    enterTodoList() {
      uni.navigateTo({ url: '/pages/home/homeList/homeList' });
	  console.log('跳转成功')
    },
    enterHabit() {
      uni.navigateTo({ url: '/pages/home/homeHabits/homeHabits' });
	  console.log('跳转成功')
    },
    enterFocus() {
      uni.navigateTo({ url: '/pages/home/homeAttentions/homeAttentions' });
	  console.log('跳转成功')
    },
    enterTarget() {
      uni.navigateTo({ url: '/pages/home/homeTarget/homeTarget' });
	  console.log('跳转成功')
    },
    viewAllRecords() {
      uni.navigateTo({ url: '/pages/allRecords/allRecords' });
    },
	mounted()
	{
		
	}
  }
};
</script>

<style scoped>
.home-container {
  background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
  padding: 20rpx;
  height: 100vh;
}

.welcome-section {
  background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
  padding: 40rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.header-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.welcome-text {
  color: orange;
}

.welcome-title {
  padding-left: 25rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.user-name {
  margin-left: 25rpx;
  font-size: 28rpx;
  color: orange;
}

.study-data {
  display: flex;
  justify-content: space-between;
}

.data-item {
  color: orange;
  text-align: center;
}

.data-value {
  font-size: 40rpx;
  font-weight: bold;
}

.data-label {
  font-size: 24rpx;
}

.function-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.button-item {
  width: calc(50% - 10rpx);
  background-color: #C1E1C1;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  font-weight: bold;
}

.button-item image {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.button-item text {
  font-size: 28rpx;
  color: #333;
}

.recent-activity {
  background-color: #C1E1C1;
  border-radius: 20rpx;
  padding: 30rpx;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.activity-title {
  font-size: 32rpx;
  font-weight: bold;
  background-color: #C1E1C1;
}

.see-all {
  font-size: 28rpx;
  color: #2196f3;
}

.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 20rpx 0;
  background-color: #C1E1C1;
  border-bottom: 1rpx solid #C1E1C1;
}

.item-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  background-color: #C1E1C1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.item-icon image {
  width: 40rpx;
  height: 40rpx;
}

.item-content {
  flex: 1;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.item-time {
  font-size: 24rpx;
  color: #666;
}

.item-value {
  font-size: 28rpx;
  color: #2196f3;
  font-weight: bold;
}
</style>